<template>
    <div class="coupon-wrapper content">
      <h3 v-show="iswap" class="headTitle"><a href="javascript:history.back();" class="back" ></a><p>领券中心</p><a class="ticketIcon"></a></h3>
      <category-menu @clidChange = clidChange :menu = menu></category-menu>
     <coupon-list :cid = cid></coupon-list>
    </div>
</template>

<script>
import CategoryMenu from "./CategoryMenu";
import fetch from '../common/fetch'
import CouponList from "./CouponList";
import fetchJsonp from "../common/fetchJsonp";
import {staticUrl,uleUrl} from '../common/env'
import $ from "../common/uleUtil";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "",
      cid: "10001",
      iswap: false,
      menu: ""
    };
  },
  created() {
    this.getMenu();
  },
  mounted() {
    if(!$.browser.ule) this.iswap = true;
  },
  methods: {
    getMenu: function() {
      const oThis = this;
      fetchJsonp("//m."+uleUrl+"/mact/coupon/searchCategory",{},{jsonpCallback:'jsonCallback'})
        .then(function(response) {
          if (response.code === "0000"){
            oThis.menu = response.returnMsg;
          } 
        })
        .catch(function(err) {
          console.log("Fetch错误:" + err);
        });
    },
    clidChange (cid){
      this.cid = cid
    }
  },
  components: {
    CategoryMenu,
    CouponList
  }
};
</script>
<style src="../style/common.css"></style> 
<style src="../style/coupon.css"></style> 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="styl">
/* @import '../style/coupon.css'; */

.headTitle {
  max-width: 640px;
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.95);
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  top: 0px;
  z-index: 3;
  height: 40px;
  position: fixed !important;
}
.headTitle p {
  width: 70%;
  margin: 0px auto;
  height: 40px;
  line-height: 40px;
  font-family: "microsoft yahei";
  color: rgb(51, 51, 51);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.back {
  position: absolute;
  height: 14px;
  width: 14px;
  left: 15px;
  top: 12px;
  border-top: 2px solid rgb(102, 102, 102);
  border-left: 2px solid rgb(102, 102, 102);
  transform: rotate(-45deg);
}
.ticketIcon {
  background-image: url(https://i0.ulecdn.com/ulewap/i/blackCouponIcon.png);
  background-size: 100%;
  height: 17px;
  width: 22px;
  background-position: 0px 0px;
  display: block;
  position: absolute;
  right: 10px;
  top: 11px;
}

</style>
